<template>
	<view class="content">
		<view class="item-content">
			
			<view class="form-content">
				
				
				<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="left" label-width="0rpx">
					
					<uni-forms-item label="项目" label-width="200rpx">
						<uni-data-checkbox v-model="formData.ucQuoProjectIds" :localdata="ucQuoProjects" multiple @change="changeProject"/>
					</uni-forms-item>
					
					
					<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" >
						<uni-tr>
							
							<uni-th align="center">
								<uni-row>
									<uni-col :span="4">序号</uni-col>
									<uni-col :span="10">类型</uni-col>
									<uni-col :span="10">项目(填次数)</uni-col>
								</uni-row>
							</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in formData.ucQuoProjects" :key="index">
							
							<uni-td align="center">
								<uni-row>
									<view style="display: flex;align-items: stretch;">
										<uni-col :span="4">
											<view class="border-solid">{{ item.indexNo }}</view>
										</uni-col>
										<uni-col :span="20">
											<uni-col :span="24">
												<view style="display: flex;align-items: stretch;!important">
													<uni-col :span="12">
														<view class="border-solid">
															<DictTag option="quota_type" :value="item.quotaType"/>
														</view>
													</uni-col>
													<uni-col :span="12">
														<view class="border-solid">
															{{ item.name }}
														</view>
													</uni-col>
												</view>
												
												
											</uni-col>
											<uni-col :span="24">
												<view class="border-solid" style="flex-direction: column;">
													<uni-col :span="24" v-for="(ucQuoProjectItem,indexItem) in formData.ucQuoProjects[index].ucQuoProjectItems" :key="ucQuoProjectItem.id">
														
														<uni-col :span="16">
															<view style="text-align:left;padding-left: 10rpx;padding-right: 10rpx;">
																{{ucQuoProjectItem.indexStr + ' ' +ucQuoProjectItem.name + '('+ucQuoProjectItem.score+'分)' }}
															</view>
														</uni-col>
														
														<uni-col :span="8">
															<uni-form-item label="">
																<uni-number-box v-model="ucQuoProjectItem.num" :min="0" :max="ucQuoProjectItem.numCanApply" placeholder="次数" ></uni-number-box>
															</uni-form-item>
														</uni-col>
													</uni-col>
												</view>
											</uni-col>
										</uni-col>
										
									</view>
									
								</uni-row>
							</uni-td>
							
						</uni-tr>
						
						
						
					</uni-table>
					
					<view style="height: 60rpx;"></view>
					<uni-forms-item label="附件" required label-width="200rpx"></uni-forms-item>
					<uni-forms-item name="imgList">
						<uni-file-picker :imageStyles="{width:'200rpx',height: '200rpx'}" :v-model="formData.imgList" :value="formData.tempImgList"
							file-mediatype="image" :limit="9" file-extname="png,jpg,jpeg" 
							@select="selectFile" @delete="deleteFile" />
					</uni-forms-item>
					
					<uni-forms-item>
						<button @click="submit">提 交</button>
					</uni-forms-item>
					
					<view style="height: 300rpx;"></view>
					
				</uni-forms>
			</view>
			
		</view>
		
		
		
		
		
		
		
		
		
		
	</view>
</template>

<script>
	import { getDicts } from '@/components/DictTag/DictTag.js'
	import {image_base_url} from '@/api/config.js'
	export default {
		data() {
			return {
				imageBaseUrl: image_base_url,
				dictTypes:[
					'quota_type'
				],
				dicts:{
					quota_type:[],
				},
				dictMap:{
					quota_type:new Map(),
				},
				
				ucQuoProjects:[],
				poiApply:{},
				
				formData:{
					id:0,
					ucQuoProjectIds:[],
					ucQuoProjects:[],
					imgList:[],
					tempImgList:[],
					imgMap : new Map(),
				},
				rules:{
					// imgList: {
					// 	rules:[{ required: true, errorMessage: "请上传附件"}],
					// }
				},
			}
		},
		onLoad(option) {
			this.formData.id = option.id
			this.getFormatDicts()
			this.searchApply(this.formData.id)
		},
		methods: {
			getFormatDicts(){
				this.dictTypes.forEach(dictType =>{
					getDicts(dictType).then(res =>{
						this.dicts[dictType] = res
					})
				})
				this.dictMap['quota_type'].set(10,'基础类')
				this.dictMap['quota_type'].set(20,'扣减类')
				this.dictMap['quota_type'].set(30,'活动参与类')
				this.dictMap['quota_type'].set(40,'学习提升类')
				this.dictMap['quota_type'].set(50,'社会服务类')
				this.dictMap['quota_type'].set(60,'党建工作类')
			},
			searchApply(applyId) {
			    this.$http({
					url: `/points/poiApply/searchApply/${applyId}`,
					method: 'get',
			    }).then(response => {
					if(response && response.data){
						
						this.poiApply = response.data
						this.formData.id = this.poiApply.id
						this.formData.tableId = this.poiApply.tableId
						this.formData.tableName = this.poiApply.tableName
						
						this.poiApply?.ucQuoProjects?.forEach(ucQuoProject => {
							this.ucQuoProjects.push({
								text: ucQuoProject.name,
								value: ucQuoProject.id,
							})
							
						})
						
						
						this.poiApply?.poiApplyItemList?.forEach(poiApplyItem =>{
							if(this.formData.ucQuoProjectIds.indexOf(poiApplyItem.projectId) <= -1){
								this.formData.ucQuoProjectIds.push(poiApplyItem.projectId)
							}
						})
						let ucQuoProjects = this.poiApply.ucQuoProjects.filter(ucQuoProject => {
							return this.formData.ucQuoProjectIds.indexOf(ucQuoProject.id) >-1
						})
						this.formData.ucQuoProjects = ucQuoProjects
						
						this.poiApply?.imgList?.forEach(img => {
							this.formData.tempImgList.push({
								url: this.imageBaseUrl + img,
								name: img,
								extname: ''
							})
							this.formData.imgMap.set(this.imageBaseUrl + img,img)
						})
						this.formData.imgList = []
						this.formData.imgMap.forEach((value,key) =>{
							this.formData.imgList.push(value)
						})
						
						
						
					} 
				});
			},
			changeProject(e){
				if(e.detail.value && e.detail.value.length >0){
					let ucQuoProjects = this.poiApply.ucQuoProjects.filter(ucQuoProject => {
						return e.detail.value.indexOf(ucQuoProject.id) >-1
					})
					this.formData.ucQuoProjects = ucQuoProjects
				}else{
					this.formData.ucQuoProjects = []
				}
			},
			selectFile(e) {
				
				// h5上传-需要文件file对象
				//const filePath = e.tempFiles[0].file.path;
				// 微信小程序上传-需要微信临时提供临时地址
				// const filePath = e.tempFilePaths[0];
				// this.formData.imgList = [];
				for (var i = 0; i < e.tempFilePaths.length; i++) {
					const filePath = e.tempFilePaths[i]
					uni.uploadFile({
						url: this.imageBaseUrl + '/common/upload',
						name: 'file',
						filePath: filePath,
						header: {
							'content-type': 'multipart/form-data',
							'Authorization': 'Bearer ' + this.$store.state.user.token
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							this.formData.imgMap.set(e.tempFilePaths[i],data.fileName)
							this.formData.imgMap.forEach((value,key) =>{
								this.formData.imgList.push(value)
							})
						},
						error: (res) => {},
					})
				}
				
				
			},
			deleteFile(e) {
				this.formData.imgMap.delete(e.tempFilePath)
				this.formData.imgList = []
				this.formData.imgMap.forEach((value,key) =>{
					this.formData.imgList.push(value)
				})
			},
			submit(){
				let ucQuoProjectItemList =[]
				this.formData.ucQuoProjects.forEach(ucQuoProject => {
					ucQuoProject.ucQuoProjectItems.forEach(ucQuoProjectItem =>{
						if(ucQuoProject.chooseType != 1 && ucQuoProjectItem.num > 0 || ucQuoProject.chooseType == 1 && ucQuoProjectItem.scoreText > 0){
							ucQuoProjectItemList.push(ucQuoProjectItem)
						}
					})
				})
				let msg=''
				let flag = true
				console.log(this.formData.imgList)
				if(!ucQuoProjectItemList || ucQuoProjectItemList.length == 0){
					msg+='请选择项目;'
					flag= false
				}
				if(!this.formData.imgList || this.formData.imgList.length == 0){
					msg+='请上传附件;'
					flag= false
				}
				if(flag){
					uni.showLoading()
					this.$refs.form.validate().then(valid  => {
						if(valid){
							this.$http({
								url: '/points/poiApply/add',
								method: 'post',
								data: this.formData
							}).then(res => {
								uni.reLaunch({
									url:'/pages/index/index'
								})
								uni.hideLoading()
							})
						}
						
					}).catch(err => {
						uni.hideLoading()
					})
				}else{
					uni.showModal({
						title: '提示',
						content: msg,
						showCancel: false ,
					});
					return false
				}
				
				
			}
		}
		
		
	}
</script>

<style lang="scss">

	
	
.title-item{
	height: 100rpx;
	padding-top: 25rpx;
	.font-bolder {
		font-weight: bolder;
		color: #1890ff;
		border-left: solid #1890ff 10rpx;
		padding-left: 3%;
		height: 50rpx;
		line-height: 50rpx;
	}
}

.item-content{
	background-color: white;
	width: 100%;
	padding-top: 50rpx;
	
}
.form-content{
	width: 96%;
	margin-left: 2%;
}

.table-title{
	height: 140rpx;
	line-height: 60rpx;
	text-align: center;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 10rpx;
	font-weight: bolder;
	border: solid 1rpx #e8f4ff;
	background-color: #e8f4ff;
	color: #1890ff;
}
.border-solid{
	height: 100%;
	width: 100%;
	border: solid 1px #ebeef5;
	display: flex;
	justify-content: center;
	align-items: center;
}
button {
	height: 80rpx;
	line-height: 80rpx;
	background-color: #1296db;
	color: white;
}

</style>
